<template>
  <TopSafeArea/>
  <view class="container">

    <view class="search-container">
      <uni-search-bar autofocus class="search-bar"
                      placeholder="请输入标题或者用户名"
                      :focus="true" v-model="searchValue" cancelButton="none" clearButton="auto">
        <!--                      @confirm="search"    @input="input" @cancel="cancel" @clear="clear">-->
      </uni-search-bar>
    </view>

    <view class="list-container">
      <Table />
    </view>

  </view>
</template>
<script setup lang="ts">
import { getCurrentInstance } from 'vue'
import { storeToRefs } from 'pinia'
import { onLoad } from '@dcloudio/uni-app'
import useIndex from '@/hooks/useIndex'
import { usePwdListStore } from '@/stores'
import Table from '@/pages/table/index.vue'
//@ts-ignore
const { proxy } = getCurrentInstance()

let pwdListStore = usePwdListStore()
const { searchValue } = storeToRefs(pwdListStore)
const { syncRemoteData } = useIndex()

onLoad(async () => {
  await proxy.$onLaunched
  console.log('Index onLoad')
  syncRemoteData()
})

</script>
<style lang="scss" scoped>
@import '@/uni.scss';

.container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 95vh;

  .search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3%;
    margin-top: 10px;

    .search-bar {
      padding: 1px;
      width: 100%;
    }
  }

  .list-container {

    width: 100%;
    overflow-y: auto;
    margin-top: 10px;
  }
}

@media (prefers-color-scheme: dark) {
  /* DarkMode 下的样式 start */
  .container {
    background-color: $uni-dark-bg-color !important; // 强制覆盖子元素的背景颜色
    color: $uni-dark-color !important; // 强制覆盖子元素的文字颜色
    ::v-deep & * {
      background-color: $uni-dark-bg-color !important; // 强制覆盖子元素的背景颜色
      color: $uni-dark-color !important; // 强制覆盖子元素的文字颜色
    }

  }
  /* DarkMode 下的样式 end */
}
</style>
